import React, { Component } from 'react';
import Header from './components/Header'
import List from './components/List';
import Footer from './components/Footer';
import  './App.css';

class App extends Component {
    state={todos:[
        {id:'1',name:'吃饭',done:true},
        {id:'2',name:'睡觉',done:true},
        {id:'3',name:'打代码',done:false}
    ]}

    addTodo=(newTodo)=>{
       const newTods=[newTodo,...this.state.todos]
       this.setState({todos:newTods})
    }

    updateTodo=(id,done)=>{
        console.log(id,done)
        const {todos}=this.state;
        const newTodos=todos.map((item)=>{
            if(item.id ===id) {
                return {...item,done}
            }
            else {
                return item
            }
           
        })
        this.setState({todos:newTodos})
    }

    deleteTodo=(id)=>{
        if(window.confirm('确认要删除吗?')){
            const {todos}=this.state
            const newTodos=todos.filter((iteam)=>{
               return iteam.id!==id;
            })
            this.setState({todos:newTodos})
        }
    }
    
    choiceAllOption=(isChecked)=>{
       const {todos}=this.state
       const done=isChecked
       const newTodos=todos.map((iteam)=>{
           return {...iteam,done}
       })
       this.setState({todos:newTodos})
    }

    clearAllDone=()=>{
        const {todos}=this.state
        const newTodos=todos.filter((iteam)=>{
            return !iteam.done
        })
        this.setState({todos:newTodos})

    }


    render() {
        return (
               
                <div className="todo-container">
                    <div className="todo-wrap">
                        <Header addTodo={this.addTodo}/>
                        <List todos={this.state.todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
                        <Footer todos={this.state.todos} choiceAllOption={this.choiceAllOption} clearAllDone={this.clearAllDone}/>
                    </div>
                </div>
        );
    }
}

export default App;